{# SWEN-261 Thomas Heissenberger4/30/2014 #}
{% load staticfiles %}
{% load tool_tag %}
 <!-- we'll get some extra functionality with this -->
}
<html>
	<title>toolShare</title>
	<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}main.css"> <!--- simple template -->
	<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css"> <!-- css boilerplate -->
	<div id="top">
		
		<div class="menu">
			{% if user.is_authenticated %} 
				<b style="margin-left: 2em; margin-right: 2em">Welcome {{ user.username }}!</b>
				<!--- we include a menu here! -->
				<a class="pure-button" href="{{ SITE_URL }}/accounts/profile/">Profile</a>
				<a class="pure-button" href="{{ SITE_URL }}/accounts/logout/">Log Out</a>
				<a class="pure-button" href="{{ SITE_URL }}/tools/">Tools</a>
				<a class="pure-button" href="{{ SITE_URL }}/">Home</a>
				<a class="pure-button pure-button-primary" href="{{ SITE_URL }}/notices/">({{user.extendedprofile.stacksize}}) Notifications</a>

			{% else %} 
				<a href="{{ SITE_URL }}/accounts/register/">Register</a> or <a href="{{ SITE_URL }}/accounts/login/">Sign-In</a>
			{% endif %}
		</div>
		<a href="\"><img src="{{ STATIC_URL }}logo.png" class="logo"></a>
	</div>
	<h2 style="text-align: center; color: black;">Tool Description</h2>
	<hr>
	<div class="center"> <!-- start of main content -->
		<a class="pure-button" href="{{ SITE_URL }}/tools/browse/" style="margin-left: 2em; margin-right: 2em;">Browse</a>
		<a class="pure-button" href="{{ SITE_URL }}/tools/add/" style="margin-left: 2em; margin-right: 2em;">Add</a>
		<a class="pure-button" href="{{ SITE_URL }}/tools/search/" style="margin-left: 2em; margin-right: 2em;">Search</a>
		<a class="pure-button" href="{{ SITE_URL }}/accounts/profile/" style="margin-left: 2em; margin-right: 2em;">My Inventory</a>

		<!-- size item description to 2/3 of window, with a glass outline.-->
		<div class="item" style="margin: 0 auto; margin-top: 3em; margin-bottom: 3em; width: 66%; padding: 3em 3em 3em 3em; border: 2px solid rgba(0,0,0,0.5); border-radius: 12px; background: rgba(25,25,25,0.75);">

			<h1 style="text-align: center; padding-bottom: 2em; color: rgb(167, 181, 206);">{{tool.tool_name}}</h1>

			<img src="{{ STATIC_URL }}tool_pics/{{ tool.tool_name|slugify}}.png" onerror="this.src='{{ STATIC_URL }}tool_pics/unknown.png';" style="height:128px; padding: 1em 1em 1em 1em;">
			<br>
			<br>
			<br>
			<br>


			<div class="pure-g-r">

    			<div class="pure-u-1-3">
    			<!-- we want to stack these divs vertically -->
    				<div id="owner_display" style="color: slategrey;">
    					<form class="pure-form" style = "text-align: right; margin-right: 2em;">
    						Owner: <input type="text" value="{{tool.owner}}" style="color: rgb(45, 65, 70);font-weight: bold; text-align: center; width: 100px;" readonly>
    					</form>
    				</div>
    				<br>
    				<div id="location_display" style="color: slategrey; margin-right: 2em;">
    					<form class="pure-form" style = "text-align: right;">
    						Location: <input type="text" value="{{tool.location}}" style="color: rgb(41, 65, 70);font-weight: bold; text-align: center; width: 100px;" readonly>
    					</form>
    				</div>
    				<br>
    				<div id="quantity_display" style="color: slategrey; margin-right: 2em; text-align: right; vertical-align:middle">
    						Quantity:&nbsp;<div style="text-align: center; float: right; width: 100px; height: 38px; background: #eee; border-radius: 5px; margin: 1px 1px 1px 1px; vertical-align: middle; font-weight: bold;"> 
    							{{ tool.tool_name|colorfy|safe }}
    						</div>
    						
    					
    				</div>

    			</div>
    			<div class="pure-u-2-3" style="margin: 2em auto; text-align: center; color: slategrey;">
    				Made by {{tool.tool_manufacture}}
    				<br>
    				<br>
    				{{tool.tool_description}}
    			</div>


			</div>



		</div>
	</div>




</html>